import React, { useState } from "react";

import {
  StyleSheet,
  ScrollView,
  Text,
  View,
  Modal,
  TouchableWithoutFeedback,
  TouchableOpacity,
  Image,
  Dimensions,
} from "react-native";

const dimen = Dimensions.get("window");
const width = dimen.width;

const ScrollPicker = ({ options, onSubmit, selectedIndex }) => {
  // for (let i = 0; i < options.length; i++) {
  //   if ((i = 0)) {
  //     options[0].unshift("");
  //     options[0].push("");
  //   } else {
  //     for (let j = 0; j < options[i].length; j++) {
  //       options[i][j].unshift("");
  //       options[i][j].push("");
  //     }
  //   }
  // }
  // console.log("展示", showData);
  const [isVisible, setIsVisible] = useState(false);
  const [currentCard1, setCard1] = useState(selectedIndex[0]);
  const [currentCard2, setCard2] = useState(selectedIndex[1]);
  const onAnimationEnd1 = (e) => {
    // 求出水平方向上的偏移量
    let offSetY = e.nativeEvent.contentOffset.y;
    console.log(offSetY);
    // 计算当前页码
    let currenCard = offSetY / 38;
    // 重新绘制UI
    setCard1(parseInt(currenCard.toFixed(0)));
    setCard2(0);
    console.log("1===", currentCard1 + 1);
  };
  const onAnimationEnd2 = (e) => {
    // 求出水平方向上的偏移量
    let offSetY = e.nativeEvent.contentOffset.y;
    console.log(offSetY);
    // 计算当前页码
    let currenCard = offSetY / 40;
    // 重新绘制UI
    setCard2(parseInt(currenCard.toFixed(0)));
    console.log("1===", currentCard2 + 1);
  };

  return (
    <View style={styles.borderView}>
      <TouchableOpacity
        onPress={() => {
          setIsVisible(true);
        }}
      >
        <Text>
          {options[0][currentCard1 + 1] +
            options[1][currentCard1][currentCard2 + 1]}
        </Text>
      </TouchableOpacity>
      <Modal animationType="fade" transparent={true} visible={isVisible}>
        <View style={styles.ModalBackground}></View>
        <View style={{ flex: 2 }}>
          <TouchableWithoutFeedback
            onPress={() => {
              setIsVisible(false);
              onSubmit(
                currentCard1,
                options[0][currentCard1 + 1],
                currentCard2,
                options[1][currentCard1][currentCard2 + 1]
              );
            }}
          >
            <View style={styles.ModalTop}></View>
          </TouchableWithoutFeedback>
        </View>
        <View style={{ flex: 1 }}>
          <View style={styles.ModalStyle}>
            <View
              style={{ flexDirection: "row", marginTop: 5, marginBottom: 5 }}
            >
              <View style={{ marginLeft: 10, flex: 7 }}>
                {/* <TouchableOpacity>
                  <Text style={{ color: "#888" }}>取消</Text>
                </TouchableOpacity> */}
              </View>
              <View style={{ marginRight: 10, flex: 1 }}>
                <TouchableOpacity
                  onPress={() => {
                    setIsVisible(false);
                    onSubmit(
                      currentCard1,
                      options[0][currentCard1 + 1],
                      currentCard2,
                      options[1][currentCard1][currentCard2 + 1]
                    );
                  }}
                >
                  <Text style={{ color: "blue" }}>确定</Text>
                </TouchableOpacity>
              </View>
            </View>
            <View
              style={{
                height: 102,
                marginTop: 10,
                marginBottom: 10,
                flexDirection: "row",
                width: "100%",
              }}
            >
              <View style={{ marginLeft: "10%", width: "39%" }}>
                <ScrollView
                  vertical={true} // 水平方向
                  showsHorizontalScrollIndicator={false} // 隐藏水平指示器
                  showsVerticalScrollIndicator={false} // 隐藏垂直指示器
                  // pagingEnabled={true} // 开启分页功能
                  onMomentumScrollEnd={onAnimationEnd1} // 当一帧滚动完毕的时候调用
                >
                  {options[0].map((item, index) => {
                    return (
                      <View key={index}>
                        <View style={styles.modalOption}>
                          <Text
                            style={[
                              styles.modalText,
                              index == currentCard1 + 1
                                ? { color: "#4e6ef2" }
                                : null,
                            ]}
                          >
                            {item}
                          </Text>
                        </View>
                        {index < options[0].length - 2 && index > 0 ? (
                          <View style={styles.line}></View>
                        ) : null}
                      </View>
                    );
                  })}
                </ScrollView>
              </View>
              <View style={{ marginLeft: "2%", width: "39%" }}>
                <ScrollView
                  vertical={true} // 水平方向
                  showsHorizontalScrollIndicator={false} // 隐藏水平指示器
                  showsVerticalScrollIndicator={false} // 隐藏垂直指示器
                  // pagingEnabled={true} // 开启分页功能
                  onMomentumScrollEnd={onAnimationEnd2} // 当一帧滚动完毕的时候调用
                >
                  {options[1][currentCard1].map((item, index) => {
                    return (
                      <View key={index}>
                        <View style={styles.modalOption}>
                          <Text
                            style={[
                              styles.modalText,
                              index == currentCard2 + 1
                                ? { color: "#4e6ef2" }
                                : null,
                            ]}
                          >
                            {item}
                          </Text>
                        </View>
                        {index < options[1][currentCard1].length - 2 &&
                        index > 0 ? (
                          <View style={styles.line}></View>
                        ) : null}
                      </View>
                    );
                  })}
                </ScrollView>
              </View>

              {/* <ScrollView
                // style={styles.scrollViewStyle}
                vertical={true} // 水平方向
                showsHorizontalScrollIndicator={false} // 隐藏水平指示器
                showsVerticalScrollIndicator={false} // 隐藏垂直指示器
                // pagingEnabled={true} // 开启分页功能
                onMomentumScrollEnd={onAnimationEnd} // 当一帧滚动完毕的时候调用
              >
                {options[0].map((item, index) => {
                  return (
                    <View key={index}>
                      <View style={styles.modalOption}>
                        <Text style={styles.modalText}>{item}</Text>
                      </View>
                      {index < options[0].length - 2 && index > 0 ? (
                        <View
                          style={{
                            height: 1,
                            backgroundColor: "#ddd",
                            width: "80%",
                            alignSelf: "center",
                          }}
                        ></View>
                      ) : null}
                    </View>
                  );
                })}
              </ScrollView> */}
            </View>
          </View>
        </View>
        <View style={{ flex: 2 }}>
          <TouchableWithoutFeedback
            onPress={() => {
              setIsVisible(false);
              onSubmit(
                currentCard1,
                options[0][currentCard1 + 1],
                currentCard2,
                options[1][currentCard1][currentCard2 + 1]
              );
            }}
          >
            <View style={styles.ModalTop}></View>
          </TouchableWithoutFeedback>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  borderView: {
    padding: 5,
    paddingLeft: "5%",
    paddingRight: "5%",
    justifyContent: "center",
  },
  scrollViewStyle: {
    marginTop: 100,
    height: 93,
    width: 100,
  },
  ModalBackground: {
    backgroundColor: "#727272",
    opacity: 0.3,
    zIndex: 0,
    position: "absolute",
    width: "100%",
    height: "100%",
  },
  ModalStyle: {
    alignSelf: "center",
    // height: 102,
    width: "80%",
    borderRadius: 10,
    backgroundColor: "#ffffff",
    zIndex: 1,
    position: "relative",
  },
  ModalTop: {
    flex: 1,
  },
  modalOption: {
    // backgroundColor: "yellow",
    width: "100%",
    padding: 5,
    height: 34,
  },
  modalText: {
    alignSelf: "center",
    fontSize: 16,
    color: "#201D1D",
  },
  line: {
    height: 1,
    backgroundColor: "#ddd",
    width: "80%",
    alignSelf: "center",
  },
});

export default ScrollPicker;
